<template>
  <div class="xuetang-page">
    <div class="page-header">
      <div class="image-logo">
        <img src="../../../assets/images/process.png" alt="">
        监测设备：雅培瞬感I代
      </div>
      <div class="title">
        1月15日-1月30日 已佩戴11天4小时
      </div>
      <div class="title chart-process">
        <!-- 进度条 -->
        <ChartProcess></ChartProcess>
      </div>
    </div>
    <div class="target">
      <div class="target-value">
        <div class="target-value_item" v-for="(item, index) in 3" :key="index">
          <div class="title">模拟糖化血红蛋白</div>
          <div class="number">
           <span>6.2<span class="unit">%</span></span>
          </div>
        </div>
      </div>
      <div class="target-chart">
        <BarProcess></BarProcess>
      </div>
    </div>
    <div class="data-chart-area">
      <ChartArea></ChartArea>
    </div>
    <div class="data-card">
      <div class="card-box" v-for="(itx, i) in 3" :key="i+ 100">
        <div class="title">葡萄糖暴露量特写</div>
        <div class="content">
          <div class="con-item" v-for="(item, index) in 3" :key="index">
            <div class="item-title-one">日间</div>
            <div class="item-title-two">6AM-12AM</div>
            <div class="item-title-unit">mmol/L</div>
            <div class="item-title-number">6.7</div>
            <div class="item-title-range">4.9-6.7</div>
          </div>
        </div>
      </div>
    </div>
    <div class="data-tir">
      <div class="title">每日TIR缩略图</div>
      <div class="tir-card-box">
        <div class="tir-card-item" v-for="(item, index) in 10" :key="index">
          <div class="item-left">
            <div class="date">12/23</div>
            <div class="qualified">
              <div class="standard">达标率</div>
              <div class="number">90%</div>
            </div>
          </div>
          <div class="tir-chart">
            <BarProcess :flag='small'></BarProcess>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-big">
      <ChartBig></ChartBig>
    </div>
    <div class="analysis">
      <div class="analysis-box">
        <div class="analysis-header">
          <div class="header-left">饮食分析</div>
          <div class="header-icon">
            <Icon type="ios-arrow-dropright" color="#333" />
          </div>
        </div>
        <div class="analysis-title">
          本周期已记录饮食 <span class="important">21</span> 次
        </div>
        <div class="content">
          <ChartLine></ChartLine>
        </div>
      </div>
      <div class="analysis-box">
        <div class="analysis-header">
          <div class="header-left">饮食分析</div>
          <div class="header-icon">
            <Icon type="ios-arrow-dropright" color="#333" />
          </div>
        </div>
        <div class="analysis-title">
          本周期已记录饮食 <span class="important">21</span> 次
        </div>
        <div class="content">
          <ChartLine></ChartLine>
        </div>
      </div>
      <div class="analysis-box">
        <div class="analysis-header">
          <div class="header-left">饮食分析</div>
          <div class="header-icon">
            <Icon type="ios-arrow-dropright" color="#333" />
          </div>
        </div>
        <div class="analysis-title">
          本周期已记录饮食 <span class="important">21</span> 次
        </div>
        <div class="content">
          <ChartBing></ChartBing>
        </div>
      </div>
    </div>
    <div class="hot-chart">
      <div class="title">八点血糖</div>
      <div class="hot-box">
        <ChartHot></ChartHot>
      </div>
      <div class="page">
        <div class="up">
          <Icon type="ios-arrow-back" />
        </div>
        <div class="page-number">
          <span class="current">2</span>
          /
          <span class="total">10</span>
        </div>
        <div class="down">
          <Icon type="ios-arrow-forward" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { ChartXueLine, ChartLine, ChartProcess, ChartArea, ChartBig, ChartBing, ChartHot } from '_c/charts'
import { getTableData } from '@/api/data'
import Icons from '_c/icons'

import BarProcess from './bar-process'

export default {
  name: 'tables_page',
  components: {
    Tables,
    ChartXueLine,
    Icons,
    ChartProcess,
    BarProcess,
    ChartArea,
    ChartBig,
    ChartLine,
    ChartBing,
    ChartHot
  },
  data () {
    return {
      small: false,
      time1: '3分钟前更新  14:35',
      columns: [
        { title: 'Name', key: 'name', sortable: true },
        { title: 'Email', key: 'email', editable: true },
        { title: 'Create-Time', key: 'createTime' },
        {
          title: 'Handle',
          key: 'handle',
          options: ['delete'],
          button: [
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    vm.$emit('on-delete', params)
                    vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                  }
                }
              }, [
                h('Button', '自定义删除')
              ])
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    }
  },
  mounted () {
    // getTableData().then(res => {
    //   this.tableData = res.data
    // })
  }
}
</script>

<style lang='less' scoped>
.size {
  width: 100%;
  height: 100%;
}
.xuetang-page {
  width: 100%;
}
.page-header {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F7F7F7;
  border-radius: 1px;
  .image-logo {
    margin-right: 10px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    img {
      width: 28px;
      height: 28px;
      margin-right: 10px;
    }
  }
  .title {
    margin-right: 20px;
    font-size: 12px;
  }
  .chart-process {
    width: 300px;
    height: 20px;
    .charts {
        .size;
    }
  }
}
.target {
  width: 100%;
  display: flex;
  .target-value {
    flex: 2;
    display: flex;
    justify-content: space-between;
    .target-value_item {
      flex: 1;
      text-align: center;
      .title {
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #242424;
        line-height: 18px;
        margin-top: 20px;
      }
      .number {
        font-size: 39px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 700;
        color: #1F2E4D;
        line-height: 20px;
        margin-top: 20px;
        text-align: center;
      }
      .unit {
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1F2E4D;
        line-height: 18px;
      }
    }
  }
  .target-chart {
    flex: 1;
    height: 140px;
    margin-top: 10px;
  }
}
.data-chart-area {
  width: 100%;
  height: 200px;
  .charts {
    height: 100%;
  }
}
.data-card {
  display: flex;
  margin-top: 40px;
  .title {
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #242424;
    line-height: 18px;
    margin-bottom: 20px;
  }
  .card-box {
    flex: 1;
    margin-right: 30px;
    background: #FFFFFF;
    border-radius: 7px;
    border: 1px solid #E6E9F0;
    text-align: center;
    padding: 10px;
  }
  .card-box:last-child {
    margin-right: 0px;
  }
}
.content {
  display: flex;
  .con-item {
    flex: 1;
    border-right: 1px solid #E6E9F0;
    .item-title-one,
    .item-title-two {
      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #242424;
      line-height: 19px;
    }
    .item-title-unit {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #AAAAAA;
      line-height: 13px;
    }
    .item-title-number {
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #242424;
      line-height: 32px;
    }
    .item-title-range {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #AAAAAA;
      line-height: 13px;
    }
  }
  .con-item:last-child {
    border: 0px;
  }
}
.data-tir {
  background: #FFFFFF;
  border-radius: 7px;
  border: 1px solid #E6E9F0;
  padding: 10px;
  margin-top: 18px;
  .title {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #242424;
    line-height: 18px;
  }
  .tir-card-box {
    width: calc(~'100% + 20px');
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    .tir-card-item {
      display: flex;
      width: 130px;
      height: 97px;
      border: 1px solid #ECECEC;
      padding: 5px 7px;
      justify-content: space-between;
      margin-right: 10px;
      margin-top: 10px;
    }
    .item-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-right: 10px;
      .item-left {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
      }
      .standard {
        font-size: 10px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1F2E4D;
        line-height: 22px;
      }
      .number {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1F2E4D;
        line-height: 14px;
      }
    }
  }
}
.chart-big {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  border-radius: 11px;
  border: 1px solid #E6E9F0;
  padding: 10px;
  .charts {
    width: 100%;
    height: 100%;
  }
}
.analysis {
  width: 100%;
  margin-top: 20px;
  display: flex;
  .analysis-box {
    flex: 1;
    border-radius: 11px;
    border: 1px solid #E6E9F0;
    padding: 20px;
    margin-right: 28px;
    .analysis-header {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      .header-left {
        font-size: 21px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #242424;
      }
      .header-icon {
        color: #AFAFAF;
        font-size: 30px;
        line-height: 40px;
      }
    }
    .analysis-title {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #AAAAAA;
      line-height: 13px;
      .important {
        color: #16CCA6;
      }
    }
    .content {
      width: 100%;
      height: 150px;
      margin-top: 10px;
      .charts {
        width: 100%;
        height: 100%;
      }
    }
  }
  .analysis-box:last-child {
    margin: 0;
  }
}

.data-analy {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .number {
    display: flex;
    align-items: center;
    .big {
      font-size: 64px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #242424;
      line-height: 89px;
      margin-right: 12px;
    }
    .unit {
      .arrow {
        font-size: 32px;
        color: #242424;
        text-align: center;
      }
      .unit-s {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9F9F9F;
        line-height: 23px;
        position: relative;
        top: -10px;
      }
    }
  }
  .classify {
    display: flex;
    .item {
      width: 100px;
      margin-left: 30px;
      text-align: center;
      .icon-title {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: center;
        span {
          display: inline-block;
          margin-left: 3px;
        }
      }
      .sum {
        width: 100%;
        text-align: center;
        font-size: 22px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #242424;
        line-height: 32px;
      }
    }
  }
}
.hot-chart {
  width: 100%;
  border-radius: 11px;
  border: 1px solid #E6E9F0;
  padding: 20px;
  margin-top: 20px;
  .title {
    width: 100%;
    font-size: 21px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #343434;
    line-height: 29px;
    text-align: center;
  }
  .hot-box {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    .charts {
      width: 100%;
      height: 100%;
    }
  }
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .up,
  .down {
    width: 25px;
    height: 25px;
    background: #F0F2F5;
    border-radius: 2px;
    border: 1px solid #D7DBE0;
    text-align: center;
    line-height: 23px;
    margin: 0 10px;
    cursor: pointer;
  }
  .current {
    color: #16CCA6;
  }
}
</style>
